<template>
        <el-dialog 
           title="新增用户"
           :visible.sync="addUserDialogVisible"
           size='large'
           :lock-scroll='false'
           top='5vh'
           custom-class='adduser-dialog'
         >
            <div class="adduser" >

               <section class="search">
                 <el-input
                  v-model='searchValue'
                  placeholder="请输入8位员工姓名编号或姓名查询"
                  style='width:500px'>
                 </el-input>
                 <el-button class="search-button" @click='search'>查询</el-button>

               </section>            



               <section class="adduser-table">
                 
                <el-table 
                  :data='tableData'
                  stripe
                  border
                  fit	
                  style="width: 350%">
                  
                    <el-table-column type="index" label='#' width="50">

                    </el-table-column>
                    
                  
                    <el-table-column label='员工编号' property="emplid" width='140'>

                    </el-table-column>
                    
                    <el-table-column label='姓名' property='name' width='140'>

                    </el-table-column>



                    <el-table-column label='职位' property='position_desc'>

                    </el-table-column>

                    <el-table-column label='操作' width='200'>
                      <template slot-scope="scope">

                       <el-button
                         class="fa fa-refresh"
                         @click.stop='handleSync(scope.row)' 
                        :key='scope.$index'>&nbsp; 同步账号</el-button>
                      </template>

                    </el-table-column>

                </el-table> 
                 
               </section>   

               <section class="pagination-block" v-if='page'>
                <span class="info">共 {{page.total}}条记录，当前显示第 {{(page.pageNum-1)==0?1:(page.pageNum-1)*page.pageSize+1}} 到第 {{(page.pageNum * page.pageSize) - page.total>=1?(page.pageNum * page.pageSize) - (page.pageNum * page.pageSize - page.total):page.pageNum * page.pageSize}} 条记录</span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 50, 200]"
                     :page-size="page.pageSize"
                    layout="sizes, prev, pager, next, jumper,slot"
                    :total='page.total'
                    >
                  </el-pagination>               
                 </section> 

            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="changeVisible">取 消</el-button>
            </span>
    
        </el-dialog>
</template>

<script>
import Vue from "vue";
import {
  Checkbox,
  CheckboxGroup,
  Button,
  Dialog,
  Notification,
  Table,
  TableColumn,
  Pagination
} from "element-ui";
import URL from "@/common/js/adminUrl";
Vue.use(Pagination);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Table);
Vue.use(TableColumn);
export default {
  created () {
    Bus.$on("新增用户", data => (this.addUserDialogVisible = data.adduser))
  },

  data () {
    return {
      addUserDialogVisible: false,
      res: "",
      searchValue: '',
      saveFlag: false,
      tableData: [],
      pageSizeVal: '',
      page: null,
      searchValue: null
    };
  },
  methods: {
    handleSync (index) {
      let params = {
        employeeId: index.emplid
      }

      this.Axios.Post(URL.syncEmployee.url, params)
        .then((res) => {
          if (res.status == 200) {
            Notification({
              title: "同步成功",
              type: "success",
              offset: "1"
            })

            let params = {
              employeeIdOrName: this.searchValue,
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }

            this.Axios.Post(URL.relationEmp.url, params).then((res) => {
              this.tableData = res.data.datas;
              this.page = res.data.page
            })


          } else {
            Notification({
              title: "同步失败,请重试",
              type: "error",
              offset: "1"
            })
          }
        })

    },
    search () {

      let params = {
        employeeIdOrName: this.searchValue,
        pageNum: 1,
        pageSize: 5
      }

      this.Axios.Post(URL.relationEmp.url, params).then((res) => {
        this.tableData = res.data.datas;
        this.page = res.data.page
      })

      this.searchFlag = this.searchValue ? this.searchValue : false
    },

    handleSizeChange (val) {

      this.pageSizeVal = val;

      let params = {
        pageNum: 5,
        pageSize: val,
        employeeIdOrName: this.searchFlag || ''
      }

      this.Axios.Post(URL.relationEmp.url, params).then((res) => {
        this.tableData = res.data.datas
        this.page = res.data.page

      })


    },
    handleCurrentChange (val) {


      let params = {
        pageNum: val,
        pageSize: this.pageSizeVal || 5,
        employeeIdOrName: this.searchFlag || ''
      }



      this.Axios.Post(URL.relationEmp.url, params).then((res) => {
        this.tableData = res.data.datas;
        this.page = res.data.page
      })

    },



    changeVisible () {
      this.saveFlag = false;
      this.addUserDialogVisible = false;
    }

  },

}
</script>

<style lang='less'>
.adduser-dialog {
  width: 78% !important;
  overflow-x: hidden;
}

.search {
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  .search-button {
    position: relative;
    top: 1px;
  }
}

.adduser-table {
  .el-table__empty-block {
    border-left: 1px solid #dfe6ec !important;
  }
  .el-table_1_column_6 {
    border-left: 1px solid #dfe6ec !important;
  }
}

.pagination-block {
  margin-top: 22px;
  display: flex;
  align-items: center;
}
.pagination-block .el-pagination {
  margin-top: 0;
}
.pagination-block .info {
  margin: 0 50px 0 20px;
}
.pagination-block .el-pagination__sizes {
  margin-top: -2px;
}
</style>